<template>
	<view class="share">
		<image src="https://oos.kmey.cn/e6/20785473c87afa576a4a43a1a7023e.png" mode=""></image>
		<view class="qr_code">
			<image :src="qrCode" mode=""></image>
		</view>
		<view class="share_bottun">
			<view class="button share_code" @click.stop="save">
				保存二维码
			</view>
			<view class="button extension" @click.stop="copy">
				复制推广链接
			</view>
		</view>
		<!-- <view class="hr">
			<HR align="center" width="134" color="#E4E4E4" SIZE="1"></HR>
			<text>分享</text>
			<HR align="center" width="134" color="#E4E4E4" SIZE="1"></HR>
		</view> -->
		<!-- <view class="wx_share">
			<view class="wx_button" @click="wxScene(0)">
				<uni-icons type="weixin" color="#fff" size="48"></uni-icons>
			</view>
			<view class="wx_button" @click="wxScene(1)">
				<uni-icons type="pyq" color="#fff" size="48"></uni-icons>
			</view>
		</view> -->
		<view class="notice">
			<view class="">1.好友识别二维码通过手机号注册</view>
			<view class="">2.也可分享此页面到微信或邀请好友注册</view>
			<view class="">3.注册完成后您即可得到相应的奖励</view>
		</view>
	</view>
</template>

<script>
	import topTitle from "@/components/topTitle.vue"
	export default {
		components:{
			topTitle
		},
		data() {
			return {
				qrCode:'',
				extensionLink:''
			};
		},
		onLoad() {
			uni.showLoading({
				title:'加载中...'
			})
			this.getQrCode()
		},
		methods:{
			//获取推广信息
			getQrCode(){
				this.$http({
					url:'/api/user/qrcode',
					method:'get',
					success:result=>{
						console.log(result)
						this.qrCode = result.data.info.qrcode
						this.extensionLink = result.data.info.url 
						uni.hideLoading()
					}
				})
			},
			//保存二维码
			save(){
				uni.saveImageToPhotosAlbum({
					filePath:this.qrCode,
					success:result=>{
						console.log(result,'-------------------保存')
						uni.showToast({
							title:'保存成功'
						})
					}
				})
			},
			//复制推广链接
			copy(){
				uni.setClipboardData({
					data:this.extensionLink,
					success:result=>{
						console.log(result,'---------------复制')
					}
				})
			},
			//分享到微信或朋友圈  i=0:微信聊天 i=1:朋友圈
			wxScene(i){
				// #ifdef H5
				if( i== 0){
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: 0,
						href: "http://uniapp.dcloud.io/",
						title: "邀请有礼",
						summary:this.extensionLink,
						imageUrl:this.qrCode,
						success: function (res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function (err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
				}else{
					uni.share({
						provider: "weixin",
						scene: "WXSceneTimeline",
						type: 0,
						href: "http://uniapp.dcloud.io/",
						title: "邀请有礼",
						summary:this.extensionLink,
						imageUrl:this.qrCode,
						success: function (res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function (err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
				}
				// #endif
				
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	page{
		width: 100%;
		height: 100%;
	}
	.share{
		width: 100%;
		height: 100%;
		overflow-y: auto;
		// background-image: url('https://oos.kmey.cn/e6/20785473c87afa576a4a43a1a7023e.png');
		// background-size: 100% 80%;
		background-color: #fea360;
		// background-repeat: no-repeat;
		position: relative;
		>image{
			width: 100%;
			height: 1300rpx;
		}
		.qr_code{
			width: 205px;
			height: 205px;
			margin: 555rpx auto 70px auto; 
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			>image{
				width: 100%;
				height: 100%;
			}
		}
		.share_bottun{
			margin:0 46px;
			position: absolute;
			left: 0;
			right: 0;
			top: 1100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.button{
				padding:10px 33px;
				color: #fff;
				font-size: 14px;
				font-weight: 500;
				background-image: linear-gradient(to bottom right, #f80000, #fea360);
				border-radius: 35px;
			}
		}
		.hr{
			margin:0 50px;
			margin-top: 45px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #A7A7A7;
		}
		.wx_share{
			margin:33px 125px 66px 125px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.wx_button{
				width:72px;
				height: 72px;
				text-align: center;
				line-height: 72px;
				border-radius: 50%;
				background: #10C77C;
			}
		}
		.notice{
			position: absolute;
			margin-left: 60px;
			margin-top: 20px;
			color: #fff;
			top: 1200rpx;
			>view{
				font-size: 12px;
			}
		}
	}
</style>
